import React, { memo } from 'react';
import { Handle, useReactFlow, Position } from '@xyflow/react';
import { CheckCircleTwoTone } from '@ant-design/icons';

import styles from './index.module.less';

const options = [
  {
    value: 'smoothstep',
    label: '写入数据库',
  },
  {
    value: 'step',
    label: 'Step',
  },
  {
    value: 'default',
    label: 'Bezier (default)',
  },
  {
    value: 'straight',
    label: 'Straight',
  },
];

function Select({ value, handleId, nodeId }) {

  const { setNodes } = useReactFlow();

  const onChange = (evt) => {

    console.log(evt)
    setNodes((nds) =>
      nds.map((node) => {

        if (node.id === nodeId) {
          node.data = {
            ...node.data,
            selects: {
              ...node.data.selects,
              [handleId]: evt.target.value,
              "testContent": "设置节点数据内容"
            },
          };
        }
        console.log(node)
        return node;
      }),
    );
  };

  return (
    <div className="custom-node__select">
      <div>事件类型</div>
      <select className={styles.nodrag} onChange={onChange} value={value}>
        {options.map((option) => (
          <option key={option.value} value={option.value}>
            {option.label}
          </option>
        ))}
      </select>
      {handleId == 'handle-0' ? (
        <Handle type="target" position={Position.Right} id={handleId} />
      ) : (
        <Handle type="source" position={Position.Right} id={handleId} />
      )}

    </div>
  );
}

/**
 * 自定义任务事件节点
 * @param {*} param0 
 * @returns 
 */
function CustomNode({ id, type, data }) {

  console.log(data)
  console.log(type)

  return (
    <>
      <div className={styles.customNode}>
        <div className={styles.title} onClick={data.onChange}>
          <CheckCircleTwoTone twoToneColor="#52c41a" /> 自定义任务节点
        </div>
        <div className="custom">
          {data.selects ? Object.keys(data.selects)?.map((handleId) => (
            <Select
              key={handleId}
              nodeId={id}
              value={data.selects[handleId]}
              handleId={handleId}
            />
          )) : null}
        </div>
      </div>
    </>
  );
}

export default memo(CustomNode);
